<template>
  <view class="login-container">
    <view class="login-card">
      <view class="login-header">
        <view class="logo">
          <text class="title">Login</text>
        </view>
      </view>

      <view class="login-form">
        <view class="form-item">
          <text class="label">用户名</text>
          <input
            class="input"
            placeholder="请输入用户名"
            v-model="auth.account"
          />
        </view>

        <view class="form-item">
          <text class="label">密码</text>
          <input
            class="input"
            type="password"
            placeholder="请输入密码"
            v-model="auth.password"
          />
        </view>

        <button class="login-btn" @click="handleLogin">登录</button>

        <view class="register-link">
          <navigator url="/pages/register/register" class="link"
            >立即注册</navigator
          >
        </view>
      </view>
    </view>
  </view>
  <!-- 	    登录失败弹窗
    <view v-show="isLoginFailed" class="modal-overlay">
      <view class="modal">
        <text class="modal-title">登录失败</text><br />
        <text class="modal-content">用户名或密码错误，请重试。</text>
        <button class="modal-btn" @click="closeModal">确定</button>
      </view>
    </view> -->
</template>

<script setup>
import { ref } from "vue";
import { useAuthApi } from "../../api/auth";
import { useUserStore } from "../../stores/User";

const { login } = useAuthApi();
const { setToken, setUserId } = useUserStore();

const rememberMe = ref(false);
// const isLoginFailed = ref(true);

var auth = ref({
  account: "",
  password: "",
});

const handleLogin = async () => {
  var user;
  try {
    user = await login(auth.value);
    setUserId(user.data.userId);
    setToken(user.data.token);
    uni.navigateTo({
      url: "/pages/chat/chat",
    });
    console.log("登录");
  } catch (error) {
    uni.showModal({
      title: "提示",
      content: error,
      showCancel: false,
      confirmText: "确定",
      confirmColor: "#a020f0",
    });
    console.log("错误：", error);
  }
};

const closeModal = () => {
  isLoginFailed.value = false;
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #e6e6fa, #b0e0e6);
}

.login-card {
  width: 90%;
  max-width: 400px;
  padding: 20px;
  border-radius: 20px;
  color: #fff;
}

.login-header {
  text-align: center;
  margin-bottom: 20px;
}

.logo {
  width: 50px;
  height: 50px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-image {
  width: 100%;
  height: 100%;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
}

.login-form {
  margin-top: 20px;
}

.form-item {
  margin-bottom: 15px;
}

.label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #fff;
}

.input {
  width: 90%;
  height: 40px;
  padding: 0 10px;
  border: none;
  border-bottom: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-size: 14px;
  transition: border-bottom-color 0.3s;
}

.input:focus {
  border-bottom-color: #b0c4fa;
}

.login-btn {
  width: 100%;
  height: 40px;
  background: linear-gradient(135deg, #e6e6fa, #b0c4fa);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}

.login-btn:hover {
  background: linear-gradient(135deg, #b0c4fa, #e6e6fa);
}

.register-link {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: #fff;
}

.link {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.link:hover {
  color: #b0c4fa;
}

.title {
  font-size: 32px;
  font-weight: bold;
  color: #a020f0;
  /* 调整为图中相似的紫色 */
  margin-bottom: 30px;
}
</style>
